$(document).ready(function() {
  // query
  const query = util.parseUrlQuery();
  // title
  title(query);
  // menu active
  menuActive(query);
  // breadcrumb
  breadcrumb(query);
  // search text
  if (query.search) {
    $('form.search input').val(query.search);
  }
  // adjust container padding-top
  _fixContainerSite($('nav.navbar'), $('.container-site'), $('footer'), { topDiff: 30 });
});

$(document).on('echo-ready', function() {
  // query
  const query = util.parseUrlQuery();
  // load more
  loadMore(query);
});

function title(query) {
  if (env.site.path === 'static/articles') {
    if (query.search !== undefined) {
      document.title = `${query.search} | <%=text('Search')%> | ${env.base.title}`;
    } else if (query.categoryId !== undefined) {
      document.title = `${query.categoryName} | <%=text('Category')%> | ${env.base.title}`;
    } else if (query.tagId !== undefined) {
      document.title = `${query.tagName} | <%=text('Tag')%> | ${env.base.title}`;
    }
  } else if (env.site.path === 'static/comments') {
    document.title = `<%=text('Comments')%> | ${env.base.title}`;
  }
}

function menuActive(query) {
  const categoryId = query.categoryId || (env.article && env.article.atomCategoryId);
  if (categoryId) {
    const link = $(`.category-${categoryId}`);
    link.parents('li').addClass('active');
  }
}

function breadcrumb(query) {
  const $container = $('.breadcrumb-nav');
  // nav
  if (env.site.path === 'static/articles') {
    if (query.search !== undefined) {
      $('.parent', $container).text('<%=text("Search")%>');
      $('.current', $container).text(query.search);
    } else if (query.categoryId !== undefined) {
      $('.parent', $container).text('<%=text("Category")%>');
      $('.current', $container).text(query.categoryName);
    } else if (query.tagId !== undefined) {
      $('.parent', $container).text('<%=text("Tag")%>');
      $('.current', $container).text(query.tagName);
    }
  } else if (env.site.path === 'static/comments') {
    $('.parent', $container).text('<%=text("Comment")%>');
    $('.current', $container).text('<%=text("All")%>');
  } else if (env.site.path === 'main/article') {
    $('.parent', $container).html(`<a href="${util.url('static/articles.html')}?categoryId=${env.article.atomCategoryId}&categoryName=${encodeURIComponent(env.article.atomCategoryName)}">${util.escapeHtml(env.article.atomCategoryName)}</a>`);
    $('.current', $container).text(env.article.atomName);
  }
  // show
  if (env.site.path !== 'main/index/index') {
    $('.parent', $container).removeClass('d-none');
    $('.current', $container).removeClass('d-none');
  }
}

function loadMore(query) {
  _loadMore({
    categoryId: query.categoryId,
    tagId: query.tagId,
    search: query.search,
  });
}

function _loadMore({ categoryId, tagId, search }) {
  if ($('.article-list').length === 0) return;
  util.loadMore({
    container: '.article-list',
    index: (env.index && env.index[env.site.path]) || 0,
    onFetch({ index }) {
      // options
      const options = {
        language: env.language.current,
        where: {
        },
        orders: [
          [ 'f.sticky', 'desc' ],
          [ 'a.createdAt', 'desc' ],
        ],
        page: { index },
        mode: 'default',
      };
      // categoryId
      if (categoryId) {
        options.category = categoryId;
        options.orders = [
          [ 'f.sticky', 'desc' ],
          [ 'f.sorting', 'asc' ],
          [ 'a.createdAt', 'desc' ],
        ];
      }
      // tagId
      if (tagId) {
        options.tag = tagId;
        options.orders = [
          [ 'f.sticky', 'desc' ],
          [ 'a.createdAt', 'desc' ],
        ];
      }
      // search
      if (search) {
        options.where['f.contentSearch'] = { val: search, op: 'like' };
        options.mode = 'search';
      }
      // select
      return util.performAction({
        method: 'post',
        url: '/a/cms/article/list',
        body: {
          atomClass: env.site.atomClass,
          options,
        },
      });
    },
    onParse(item) {
      const sticky = !item.sticky ? '' : '<i class="fas fa-thumbtack"></i> ';
      const audio = !item.audioFirst ? '' : '<i class="fas fa-music"></i> ';
      const attachment = item.attachmentCount === 0 ? '' : '<i class="fas fa-paperclip"></i> ';
      const mediaUrl = item.imageFirst || item.audioCoverFirst;
      const media = !mediaUrl ? '' : `
<div class="media-right">
      <a target="_blank" href="${util.url(item.url)}">
        <img class="media-object" src="${util.combineImageUrl(mediaUrl, 125, 100)}">
      </a>
</div>
        `;
      const category = (categoryId === undefined) ?
        `<a target="_blank" href="${util.url('static/articles.html')}?categoryId=${item.atomCategoryId}&categoryName=${encodeURIComponent(item.atomCategoryName)}"><span class="num category">${util.escapeHtml(item.atomCategoryName)}</span></a>` : '';
      // tags
      let tagsText = '';
      const tags = item.atomTags ? JSON.parse(item.atomTags) : null;
      if (tags && tags.length > 0) {
        tagsText += '<i class="fas fa-tags"></i> ';
        for (let i = 0; i < tags.length; i++) {
          const tagId = tags[i];
          const tagName = util.sidebar.getTagName(tagId);
          tagsText += `<a target="_blank" href="${util.url('static/articles.html')}?tagId=${tagId}&tagName=${encodeURIComponent(tagName)}"><span class="num tag">${util.escapeHtml(tagName)}</span></a>`;
        }
        tagsText += '';
      }
      // avatar
      const userAvatar = item.avatar || util.url('assets/images/user.png');
      // stat
      const stat = `
<div class="title stat no-parse" data-article-id="${item.atomId}">
<img class="avatar avatar16" src="${util.combineImageUrl(userAvatar, 16, 16)}">
<span>${util.escapeHtml(item.userName)}</span>
<span class="num date">${util.formatDateTime(item.updatedAt)}</span>
${category}
<i class="fas fa-eye"></i><span class="num readCount">${item.readCount}</span>
<i class="fas fa-heart"></i><span class="num starCount">${item.starCount}</span>
<a target="_blank" href="${util.url(item.url)}#comments"><i class="fas fa-comment"></i><span class="num commentCount">${item.commentCount}</span></a>
${tagsText}
</div>
        `;
      return `
<li class="media">
    <div class="media-body">
      <h4 class="media-heading">${sticky}${audio}${attachment}<a target="_blank" href="${util.url(item.url)}">${util.escapeHtml(item.atomName)}</a></h4>
      ${util.escapeHtml(item.description) || item.summary}
      ${stat}
    </div>
    ${media}
</li>
        `;
    },
  });
}

function _fixContainerSite($navbar, $containerSite, $footer, options) {
  if ($navbar.length === 0 || $containerSite.length === 0 || $footer.length === 0) return;
  // init
  const $window = $(window);

  // onScroll
  const _onScroll = function() {
    // padding-top
    const navHeight = $navbar.outerHeight(false);
    $containerSite.css('padding-top', navHeight - options.topDiff);
    // min-height
    const diff = parseInt($window.height() - ($footer.offset().top + $footer.outerHeight(true)));
    const height = parseInt($containerSite.outerHeight());
    $containerSite.css('min-height', height + diff);
  };

  // bind event
  $window.on('scroll.infinite resize.infinite', _onScroll);
  _onScroll();
}
